<template>
  <div class="chart-wrapper">
    <div :id="id" class="chart-container" />
  </div>
</template>

<script>
import echarts from 'echarts'
import resize from './mixins/resize'

export default {
  name: 'ChartPic',
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    id: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '600px'
    }
  },
  data() {
    return {
      chart: null,
      dynamicData: {
        xAxisData: [],
        seriesData: [
        ]
      }
    }
  },
  computed: {
    computedHeight() {
      const baseHeight = 150 // 基础高度
      const seriesCount = this.dynamicData.seriesData.length
      return `${baseHeight * seriesCount}px`
    }
  },
  watch: {
    width(newVal) {
      if (this.chart) {
        this.chart.resize()
      }
    },
    height(newVal) {
      if (this.chart) {
        this.chart.resize()
      }
    }
  },
  mounted() {
    this.initChart()
    window.addEventListener('resize', this.resize)
  },
  beforeDestroy() {
    if (this.chart) {
      this.chart.dispose()
      this.chart = null
    }
    window.removeEventListener('resize', this.resize)
  },
  methods: {
    cancelDialog() {
      this.$emit('cancelDialogChart')
    },
    initChart() {
      this.chart = echarts.init(document.getElementById(this.id))
      this.updateChart(this.dynamicData)
    },
    updateChart(data) {
      const chart = this.chart
      const seriesCount = data.seriesData.length
      const oddSeries = data.seriesData.filter((_, index) => index % 2 !== 0)
      const evenSeries = data.seriesData.filter((_, index) => index % 2 === 0)
      // 定义一个基础的高度，用于每行图表的高度
      const baseHeight = 50

      // 根据系列数量计算总高度
      const totalHeight = baseHeight * seriesCount

      // 设置图表容器的高度
      this.$nextTick(() => {
        this.chart.resize({ height: totalHeight })
      })
      // 配置ECharts的option
      const option = {
        tooltip: {
          trigger: 'axis'
        },
        legend: [
          {
            type: 'scroll', // 启用滚动功能
            orient: 'vertical', // 垂直布局
            left: 'left', // 距离容器左侧的距离
            top: 'center', // 垂直居中
            data: oddSeries.map(series => series.name), // 使用 oddSeries 来获取奇数系列的名称
            itemWidth: 10, // 图例标记的图形宽度
            itemHeight: 10, // 图例标记的图形高度
            formatter: function(name) {
              return echarts.format.truncateText(name, 100, '14px Microsoft Yahei', '…') // 如果图例文本过长，可以截断显示
            },
            tooltip: {
              show: true // 显示图例项的提示框
            },
            // 添加间距和背景颜色等配置
            padding: 5, // 图例内边距
            backgroundColor: 'rgba(0,0,0,0.1)', // 背景颜色
            borderColor: '#ccc', // 边框颜色
            borderWidth: 1, // 边框宽度
            textStyle: { // 文本样式
              color: '#333', // 文本颜色
              fontSize: 12 // 文本大小
            }
          },
          {
            type: 'scroll', // 启用滚动功能
            orient: 'vertical', // 垂直布局
            right: 'right', // 距离容器右侧的距离
            top: 'center', // 垂直居中
            data: evenSeries.map(series => series.name), // 使用 evenSeries 来获取偶数系列的名称
            itemWidth: 10, // 图例标记的图形宽度
            itemHeight: 10, // 图例标记的图形高度
            formatter: function(name) {
              return echarts.format.truncateText(name, 100, '14px Microsoft Yahei', '…') // 如果图例文本过长，可以截断显示
            },
            tooltip: {
              show: true // 显示图例项的提示框
            },
            // 添加间距和背景颜色等配置
            padding: 5, // 图例内边距
            backgroundColor: 'rgba(0,0,0,0.1)', // 背景颜色
            borderColor: '#ccc', // 边框颜色
            borderWidth: 1, // 边框宽度
            textStyle: { // 文本样式
              color: '#333', // 文本颜色
              fontSize: 12 // 文本大小
            }
          }
        ],
        xAxis: data.seriesData.map((_, index) => ({
          type: 'category',
          data: data.xAxisData,
          gridIndex: index, // 使用对应的网格索引
          axisLabel: {
            interval: 0,
            rotate: 45,
            show: false,
            overflow: 'truncate'
          }
        })),
        yAxis: data.seriesData.map((series, index) => ({
          type: 'value',
          name: '',
          nameLocation: 'middle', // 默认是'middle'，轴名称显示在中间
          nameTextStyle: {
            color: '#333', // 轴名称颜色
            fontSize: 14, // 轴名称字体大小
            padding: [0, 0, 10, 0] // 上右下左的填充，确保轴名称与图表有距离
          },
          nameGap: 30, // 轴名称与轴线的距离
          gridIndex: index, // 使用对应的网格索引
          splitLine: {
            show: true
          },
          axisLabel: {
            inside: false, // 确保标签显示在轴外侧
            margin: 15 // 设置标签与轴线的距离
          },
          axisTick: {
            inside: false // 确保刻度显示在轴外侧
          }
        })),
        series: data.seriesData.map((seriesData, index) => ({
          name: seriesData.name,
          type: 'line',
          data: seriesData.data,
          xAxisIndex: index, // 使用对应的X轴索引
          yAxisIndex: index, // 使用对应的Y轴索引
          smooth: false,
          symbol: 'circle',
          symbolSize: 6,
          itemStyle: {
            color: this.getColor(index)
          },
          lineStyle: {
            width: 2
          }
        })),
        grid: data.seriesData.map((_, index) => ({
          top: `${index * baseHeight}px`,
          left: '10%',
          right: '10%',
          height: `${baseHeight}px`, // 设置每行的高度
          containLabel: true
        }))
      }
      chart.setOption(option, true)
    },
    resize() {
      if (this.chart) {
        this.chart.resize()
      }
    },
    importData(data) {
      this.updateChart(data)
    },
    getColor(index) {
      const colors = [
        '#1890ff', '#2fc25b', '#facc14', '#f04864', '#8543e0', '#90ed7d',
        '#ff4777', '#697689', '#ffc952', '#4657bd', '#962fbf', '#3f681c',
        '#13c2c2', '#595959', '#ee6f57', '#b8a9c9', '#6f3381', '#505d6b',
        '#ff7a45', '#5470c6', '#ca8622'
      ]
      return colors[index % colors.length]
    }
  }
}
</script>

<style scoped>
.chart-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

.chart-container {
  width: 100%;
  height: 100%;
}

.dialog-footer {
  text-align: right;
  padding: 20px;
}

.el-button {
  padding: 10px 20px;
  font-size: 14px;
  border-radius: 20px;
  transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}

.el-button:hover {
  opacity: 0.8;
}
</style>
